<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #B5A642; /* 深蓝色背景 */
            color: #ffffff; /* 白色文本 */
        }

        .header-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            position: relative; /* 为了确保内容不超出背景图像 */
            z-index: 1; /* 提高内容层级 */
        }

        .video-container video {
            width: 100%;
            height: 100%;
        }
        
        .navbar {
            width: 100%;
            height: 30%;
        }

        .logo img {
            max-width: 100%;
            height: auto;
        }

        .swiper-container, .video-container {
            width: 30%;
            height: 300px; /* 设置轮播器和视频容器的相同高度 */
            overflow: hidden;
            position: relative;
            float: left;
            margin-top: 20px; /* 添加顶边距以与导航栏分隔 */
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-section {
            overflow: hidden;
            z-index: 2; /* 提高内容层级 */
            text-align: center;
            padding: 20px;
            color: white;
        }

        .video-container {
            margin: 20px;
        }

        .navigation a {
            color: #ffffff;
            text-decoration: none;
        }

        .navigation a:hover {
            color: #ffcc00;
        }

        .navigation ul li a {
            color: #ffffff;
            text-decoration: none;
        }

        .navigation ul li a:hover {
            color: #ffcc00;
        }

        body {
            font-family: 'Arial', sans-serif; /* 使用指定字体 */
        }

        h1 {
            font-size: 2em; /* 调整标题字体大小 */
            color: #ffcc00; /* 设置标题颜色 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 添加文字阴影效果 */
        }

        p {
            line-height: 1.6; /* 设置段落行高 */
            letter-spacing: 0.5px; /* 设置字母间距 */
        }

        /* 添加样式以适应小屏幕 */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .navbar {
                width: 100%;
                height: auto;
                margin-bottom: 20px;
            }

            .swiper-container, .video-container {
                width: 100%;
                height: 200px;
                float: none;
            }
        }
    </style>
    <title>Your Subpage</title>
</head>
<body>

<div class="header-container">

    <header class="navbar">
        <div class="logo">
            <img src="../image/logo.png" alt="Website Logo">
        </div>
        <nav class="navigation">
            <ul>
                <li><a href="../index.html">Home</a></li>
                <li><a href="../web/Introduction.html">Introduction</a></li>
                <li><a href="../web/players.html">Players</a></li>
                <li><a href="../web/news.html">News</a></li>
                <li><a href="../web/data.html">Data</a></li>
            </ul>
        </nav>
    </header>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../image/p1.jpg.jpg" alt="Slide 1"></div>
            <div class="swiper-slide"><img src="../image/p2.jpg.jpg" alt="Slide 2"></div>
            <div class="swiper-slide"><img src="../image/p3.jpg.jpg" alt="Slide 3"></div>
            <div class="swiper-slide"><img src="../image/p4.jpg.jpg" alt="Slide 1"></div>
            <div class="swiper-slide"><img src="../image/p5.jpg.jpg" alt="Slide 2"></div>
            <div class="swiper-slide"><img src="../image/p6.jpg.jpg" alt="Slide 3"></div> 
            <!-- Add more slides as needed -->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Navigation -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <div class="video-container">
      
        <video controls>
            <source src="../image/vedio1.mp4.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <div class="video-container">
       
        <video controls>
            <source src="../image/vedio2.mp4.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

</div>

<section class="hero-section">
    <p>Brief Introduction of Golden State Warriors</p>
</section>

<div class="black-text">
    <p>金州勇士队（Golden State Warriors）于1946年成立并加盟BAA（1949年加盟NBA），是一支属于美国加利福尼亚州旧金山市的职业篮球队，是美国职业篮球联赛（NBA）西部联盟太平洋赛区的一部分。
        
        勇士队主场原来在宾夕法尼亚州的费城，1962年才搬到加州；由于加州的昵称是“金州” ，故取名“金州勇士” 。它是最早加盟NBA的11支球队之一；在NBA历史上，曾七次夺得总冠军 ，NBA的第一次总冠军得主就是勇士队；威尔特·张伯伦效力勇士队期间缔造了NBA单场最高分纪录100分。
        
        在唐·尼尔森成为球队教练后，勇士队成为了一支可以为季后赛席位展开争夺的劲旅，2006-07赛季季后赛第一轮更是淘汰常规赛冠军小牛队创造NBA史上第3个“黑八奇迹”。
        
        2014年5月，史蒂夫·科尔成为勇士队主教练。2014-15赛季，勇士以67胜15败排名西部联盟第一。2015年6月17日，NBA总决赛第六场，勇士客场以105-97再胜骑士，总比分4-2夺取总冠军。这是勇士队在1974-75赛季以来的第一个冠军。2015-16赛季，勇士队在NBA常规赛中取得73胜9负的成绩，打破公牛在1995-96赛季创下的纪录（72胜10负），成为NBA历史单赛季常规赛战绩最好的球队。2017年6月13日，勇士队以16胜1负的季后赛战绩，超越2000-01赛季的湖人（15胜1负），成为NBA历史上胜率最高的夺冠球队。2017-18赛季，勇士队在NBA总决赛总比分4-0战胜克里夫兰骑士队完成卫冕。2021-22赛季，勇士队在NBA总决赛大比分4-2战胜波士顿凯尔特人队夺得队史第七个总冠军
        022年休赛期，勇士签下莱恩·罗林斯 、唐特·迪温琴佐 、莱斯特·基诺内斯 、瑞安·罗林斯 、贾玛考·格林 、迈克·麦克朗、帕特·斯宾塞和特雷维恩·威廉姆斯 。
由于小佩顿的离去和新援迪温琴佐的伤缺，勇士的外线防守质量严重下滑。2022-23赛季开赛前10场比赛，勇士仅收获3场胜利，排名西部第13位，成为历史首个客场开局0胜6负的卫冕冠军。为了提升球队的防守质量，勇士在交易截止日前从开拓者换回了小佩顿。常规赛最后10场比赛，勇士收获了8场胜利，最后3个客场也取得了2胜1负的战绩，最终以44胜38负的战绩位居常规赛西部第六。季后赛首轮，勇士历经抢七大战以大比分4-3淘汰国王，晋级第二轮。西部半决赛，勇士大比分2-4被湖人淘汰，连续28次季后赛系列赛在客场至少拿到1场胜利的纪录遭遇终止。这是勇士在科尔执教以来首次输掉除总决赛之外的系列赛。
2023年休赛期，勇士送出普尔、瑞安·罗林斯、小帕特里克·鲍德温，得到克里斯·保罗 、科里·约瑟夫 、达里奥·沙里奇 、布兰丁·波杰姆斯基 、鲁迪·盖伊 、杰罗姆·罗宾逊 、罗德尼·麦格鲁德 ；在选秀大会中选中特雷斯·杰克逊-戴维斯。10月，WNBA官方宣布，勇士将正式在湾区拥有一支新的WNBA球队，在2025赛季开始参加WNBA联赛 。</p>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        autoplay: {
            delay: 1000,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });
</script>

</body>
</html>
